<template>
  <div class="note-list">
    <el-table :data="notes" style="width: 100%">
      <el-table-column prop="rbOfficialId" label="官方ID" width="100"></el-table-column>
      <el-table-column prop="keyword" label="关键词" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
      <el-table-column prop="title" label="标题" width="150">
        <template #default="scope">
          <a @click="goToCommentList(scope.row)" style="text-decoration: underline; color: blue; cursor:pointer">{{ scope.row.title }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" width="300"></el-table-column>
      <el-table-column label="操作" width="350" align="center" key="slot">
        <template #default="scope">
          <el-row :gutter="10" class="button-row">
            <el-col :span="12" class="button-col">
              <el-button class="uniform-height" @click="showUpdateKeywordDialog(scope.row)" type="primary" size="small" style="margin-top: 20px;">修改关键词</el-button>
            </el-col>
            <el-col :span="12" class="button-col">
              <el-button 
                class="uniform-height" 
                @click="setNoteRefresh(scope.row)" 
                :type="getButtonType(scope.row.isRefresh )" 
                size="small" 
                style="margin-top: 20px;">标记刷新笔记</el-button>
            </el-col>
            <el-col :span="12" class="button-col">
              <el-button class="uniform-height" @click="setNoteEdited(scope.row)" :type="getButtonType(scope.row.isEdited)" size="small" style="margin-top: 20px;">标记已编辑</el-button>
            </el-col>
            <el-col :span="12" class="button-col">
              <el-button class="uniform-height" @click="deleteNote(scope.row)" type="danger" size="small" style="margin-top: 20px;">删除笔记</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;"
    ></el-pagination>

    <!-- 修改关键词的对话框 -->
    <el-dialog 
      title="修改关键词" 
      modal-append-to-body
      v-model="dialogVisible"
      width="30%"
      @open="focusInput"
    >
      <el-input 
        ref="keywordInput" 
        v-model="newKeyword" 
        placeholder="请输入新的关键词" 
        clearable 
        @keyup.enter="confirmUpdateKeyword"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateKeyword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      notes: [],
      dialogVisible: false,
      newKeyword: '',
      currentRow: null ,
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.fetchNotes(this.currentPage,this.pageSize);
  },
  methods: {
    fetchNotes(page,pageSize) {
      axios.get('http://localhost:8080/rb/data/noteList',{
        params:{
          page:page,
          pageSize:pageSize
        }
      })
        .then(response => {
          console.log(response.data)
          this.notes = response.data.items;
          this.total= response.data.total;
        })
        .catch(error => {
          console.error('Error fetching notes:', error);
        });
    },
    deleteNote(row) {
      let rbNoteId = row.rbOfficialId;
      console.log("删除笔记"+rbNoteId);
      axios.post(`http://localhost:8080/rb/data/deleteNote`,null, {
        params: {
          noteId: rbNoteId
        }
      })
      .then(response => {
        console.log('Note deleted successfully:', response.data);
        // this.fetchNotes(this.currentPage, this.pageSize); // 重新获取数据
        this.$message.success('删除笔记成功');
      })
      .catch(error => {
        console.error('Error deleting note:', error);
        this.$message.error('删除笔记失败');
      });
    },
    formatDate(date) {
      return date ? date.toISOString().replace('T', ' ').substring(0, 19) : '';
    },
    showUpdateKeywordDialog(row) {
      this.currentRow = row; // 记录当前选中的行
      this.newKeyword = row.keyword; // 将当前行的关键词赋值给 newKeyword
      this.dialogVisible = true;
    },
    confirmUpdateKeyword() {
      if (this.currentRow) {
        const noteId = this.currentRow.rbOfficialId;
        const newKeyword = this.newKeyword;
        axios.post('http://localhost:8080/rb/data/updateNoteKeyword', null, {
        params: {
          keyword: this.newKeyword,
          noteId: noteId
        }
      })
          .then(response => {
            if (response.data.success) {
              this.currentRow.keyword = newKeyword; // 更新当前行的关键词
              this.dialogVisible = false; // 关闭对话框
              this.$message.success('关键词更新成功');
            } else {
              alert('更新关键词失败');
              this.$message.error('更新关键词失败');
            }
          })
          .catch(error => {
            console.error('Error updating keyword:', error);
            alert('更新关键词失败');
          });
      }
    },
    setNoteRefresh(row) {
      console.log("row为"+row)
      let rbNoteId = row.rbOfficialId;
      console.log("笔记id为"+rbNoteId);
      axios.post('http://localhost:8080/rb/data/setNoteRefresh', null, {
        params: {
          noteId: rbNoteId
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('设置笔记刷新成功');
        console.log('Note refreshed successfully:', response);
      }).catch(error => {
        // 处理错误
        this.$message.error('设置笔记刷新失败');
        console.error('Error refreshing note:', error);
      });
    },
    setNoteEdited(row) {
      let rbNoteId = row.rbOfficialId;
      axios.post('http://localhost:8080/rb/data/setNoteEdited', null, {
        params: {
          noteId: rbNoteId
        }
      }).then(response => {
        // 处理成功响应
        this.$message.success('设置笔记编辑成功');
        console.log('Note refreshed successfully:', response);
      }).catch(error => {
        // 处理错误
        this.$message.error('设置笔记编辑失败');
        console.error('Error refreshing note:', error);
      });
    },
    getButtonType(isField) {
      if (isField === 1) {
        return 'info'; // 灰色
      }else{
        return 'warning';
      }
    },
    focusInput() {
      this.$nextTick(() => {
        this.$refs.keywordInput.focus(); // 自动聚焦输入框
      });
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.fetchNotes(this.currentPage, this.pageSize);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchNotes(this.currentPage, this.pageSize);
    },
    goToCommentList(row) {
      this.$router.push({
        name: 'commentList',
        params: { noteId: row.rbOfficialId }
      });
    }
  }
};
</script>

<style scoped>
.note-list {
  margin: 20px;
}

.uniform-height {
  height: 36px; /* 设置统一的高度 */
  line-height: 36px; /* 保持垂直居中 */
}
</style>